<template>
  <div>
    <button
      v-for="item in total"
      :key="item"
      :class="{ active: currentPage === item }"
      @click="changeCurrentPage(item)"
    >
      {{ item }}
    </button>

    <span>每页{{ limit }}条</span>
    <select @change="changeLimit(+$event.target.value)">
      <option v-for="item in limitList" :key="item" :value="item">
        每页{{ item }}条
      </option>
    </select>
  </div>
</template>
<script>
/*
  页码组件希望接收数据：
    1.当前页  currentPage
    2.总页数  total
    3.每页条数 limit
    4.每页条数选项 limitList 
 */
export default {
  name: 'Pagination',
  props: [
    'currentPage',
    'total',
    'limit',
    'limitList',
    'changeCurrentPage',
    'changeLimit',
  ],
};
</script>
<style>
.active {
  background: red;
}
</style>
